<!-- $lib/components/Menu/Common/MenuCollapseItem.svelte -->
<script lang="ts">
	import { getContext } from 'svelte';
	import Icon from '$lib/components/Basic/Icon/Icon.svelte';
	import ArrowRight from '$lib/assets/icons/symbol/arrow-right.svg?component';
	import type { Option } from '$lib/components/Basic/Popover/types';
	import MenuSnippet from './MenuSnippet.svelte';

	let { item, level, label = 'label', selectedLeafId = null, onItemClick }: {
		item: Option;
		level: number;
		label?: string;
		selectedLeafId?: string | number | null;
		onItemClick: (item: Option, e: MouseEvent) => void;
	} = $props();

	// 确保上下文获取逻辑正确
	const context = getContext<{
		getExpandNames: (level: number) => string[];
		handleLevelExpandClick: (level: number, name: string, e: MouseEvent | Event) => void;
		getActiveNames?: (level: number) => string[];
		isCollapsed: () => boolean;
	}>('vertical-menu-context');

	if (!context) {
		throw new Error('MenuCollapseItem must be used inside VerticalMenu context');
	}

	const { getExpandNames, handleLevelExpandClick, getActiveNames, isCollapsed: contextIsCollapsed } = context;
	const isExpanded = $derived(getExpandNames(level).includes(item.id.toString())); 
	const menuIsCollapsed = contextIsCollapsed();

	// 层级缩进样式
	const getLevelIndent = (level: number) => `${10 + (level - 1) * 10}px`;

	// 从上下文获取当前层级的激活状态（非折叠时生效）
	const isActive = $derived(
		!menuIsCollapsed && getActiveNames 
			? getActiveNames(level).includes(item.id.toString()) 
			: false
	);
</script>

<div
	class="s-collapse-item"
	onkeydown={(e) => {
		if (e.key === 'Enter' || e.key === ' ') {
			e.preventDefault();
			handleLevelExpandClick(level, item.id.toString(), e);
		}
	}}
	role="button"
	tabindex="0"
>
	<div
		class={`s-collapse-item__header ${isActive ? 'is-active' : ''}`}
		onclick={(e) => {
			e.stopPropagation();
			handleLevelExpandClick(level, item.id.toString(), e);
		}}
		onkeydown={(e) => {
			if (e.key === 'Enter' || e.key === ' ') {
				e.preventDefault();
				handleLevelExpandClick(level, item.id.toString(), e);
			}
		}}
		role="button"
		tabindex="0"
		style="cursor: pointer;"
	>
		<div style={`padding-left: ${getLevelIndent(level)}; display: flex; align-items: center; flex: 1;`}>
			<Icon src={item.iconName ? item.iconName : 'weather/moon'} size="15" />
			<span class="menu-item__name">
				{item[label]}
			</span>
		</div>
		<div class={`s-collapse-item__arrow ${isExpanded ? 'is-active' : ''}`}>
			<ArrowRight width="18" height="18" />
		</div>
	</div>

	<!-- 传递完整参数给子菜单，包括 selectedLeafId 和真实 onItemClick -->
	<div class={`s-collapse-item__content ${isExpanded ? 'is-active' : ''}`}>
		<div class="s-collapse-item__content__wrap">
			<MenuSnippet
				items={item.children || []}
				level={level + 1}
				label={label}
				{selectedLeafId}
				{onItemClick}
				isCollapsed={menuIsCollapsed}
			/>
		</div>
	</div>
</div>

<style scoped lang="scss">
	.s-collapse-item__content {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.2s ease-in-out;

		&.is-active {
			grid-template-rows: 1fr; /* 展开时自适应高度 */
		}
	}

	.s-collapse-item__content__wrap {
		overflow: hidden;
	}

	.s-collapse-item {
		width: 100%;
		overflow: hidden;
		margin-bottom: 3px;
		&:last-child{ margin-bottom: 0;}
	}
	.s-collapse-item__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 38px;
		border-radius: 4px;		
		width: 100%;
		box-sizing: border-box;
		padding-right: 8px;
		&.is-active { color: var(--color-primary-500); }
		&:hover { background-color: var(--color-fill); }
	}
	.s-collapse-item__arrow {
		display: flex;
		transition: transform 0.2s ease;
		margin-left: auto;
		&.is-active { transform: rotate(90deg); }
	}
	.menu-item__name {
		font-size: 13px;
		line-height: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: 6px;
		flex: 1;
		transition: color 0.2s ease;
		text-align: left;
	}
</style>